<template>
  <view
    v-if="countDown.length"
    class="header"
    :style="[{ paddingTop: 'calc(' + statusBarHeight + 'px + 44px)' }]"
  >
    <image
      class="headerBg"
      lazy-load
      :src="asyncImgs.seckill.seckill_list_bg"
      mode="aspectFill"
    />

    <view class="headerCon">
      <view v-if="countDown.length" class="countDown">
        <view> {{ countDown[4] ? "距开始" : "距结束" }}</view>
        <view v-if="countDown[0]"> {{ countDown[0] }}天 </view>
        <view class="m">{{ countDown[1] }}</view
        >时<view class="m">{{ countDown[2] }}</view
        >分<view class="m">{{ countDown[3] }}</view
        >秒
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    countDown: {
      type: Array,
    },
  },

  data() {
    return {
      showPopup: false,
    };
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.headerBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.headerCon {
  position: relative;
  height: 180rpx;
}

.countDown {
  position: absolute;
  left: 0;
  bottom: 30rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;

  .m {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10rpx;
    width: 36rpx;
    height: 36rpx;
    color: #f0250e;
    border-radius: 8rpx;
    background: #fff;
    font-size: 22rpx;
    font-weight: bold;
  }
}
</style>
